<script lang="ts" setup>
  import { ref, watch } from 'vue'
  import OrderList from './components/OrderList.vue'

  // 获取页面参数
  const query = defineProps<{
    orderstate : string
  }>()

  // tabs 数据
  const orderTabs = ref([
    // { orderState: 1, title: '待支付', isRender: false },
    { orderState: 2, title: '待送达', isRender: false },
    { orderState: 3, title: '已完成', isRender: false },
  ])

  // 高亮下标
  //const activeIndex = ref(orderTabs.value.findIndex((v) => v.title === query.orderstate))
  const activeIndex = ref(0)

  watch(
    activeIndex,
    (newValue, oldValue) => {
      orderTabs.value[newValue].isRender = true
      if (oldValue !== undefined) {
        orderTabs.value[oldValue].isRender = false
      }
    },
    {
      immediate: true,
    },
  )
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text v-for="(item, index) in orderTabs" :key="item.title" class="item" @tap="
          () => {
            activeIndex = index
            item.isRender = true
          }
        ">
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view :style="{ left: activeIndex * 50 + '%' }" class="cursor"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper :current="activeIndex" class="swiper" @change="activeIndex = $event.detail.current">
      <!-- 滑动项 -->
      <swiper-item v-for="item in orderTabs" :key="item.title">
        <!-- 订单列表 -->
        <OrderList v-if="item.isRender" :order-state="item.title" />
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss">
  page {
    height: 100%;
    overflow: hidden;
  }

  .viewport {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }

  // tabs
  .tabs {
    display: flex;
    justify-content: space-around;
    line-height: 60rpx;
    margin: 0 10rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
    position: relative;
    z-index: 9;

    .item {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      color: #262626;
    }

    .cursor {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50%;
      height: 6rpx;
      padding: 0 50rpx;
      background-color: #27ba9b;
      /* 过渡效果 */
      transition: all 0.4s;
    }
  }

  // swiper
  .swiper {
    background-color: #f7f7f8;
  }
</style>
